import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.css';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
import './index.css';
import { NavLink, useLocation } from 'react-router-dom';
import './chartdemo3.css';
import { Layout, Menu, Tag, Breadcrumb, Button, Space, Card, Select, Checkbox, Row, Col} from 'antd';

const { Header, Content, Footer } = Layout;

const Chartdemo3 = (props) => {
      const { state } = useLocation();
      useEffect(()=>{
        console.log(state)
        if(state.description===undefined){
          state.description = '暂无描述'
        }
        console.log(state.keywords)
      }, [])
        return(
            <Layout>
              <div className='head3'></div>
              <Header className='myheader3'>
                <Breadcrumb className='bread3'>
                  <Breadcrumb.Item><HomeOutlined style={{
                    width: '20px',
                    height: '40px'
                  }}/><a href='/primary_search/primary'>主页</a></Breadcrumb.Item>
                  <Breadcrumb.Item><a href='/primary_search/advance'>搜索引擎</a></Breadcrumb.Item>
                  <Breadcrumb.Item>{state.name}</Breadcrumb.Item>
                </Breadcrumb>
              </Header>
              <div style={{
                  width: '100%',
                  height: '30px',
                  backgroundColor: 'white'
              }}></div>
              <div style={{
                backgroundColor: 'white',
                display: 'flex',
                backgroundColor: 'white'
              }}>
                <div style={{
                    width: '25vw',
                    float: 'left',
                    marginLeft: '8vw',
                    marginTop: '3vh'
                }}>
                  <img src={state.img} style={{
                    width: '100%'
                  }}></img>
                </div>
                <div style={{
                  backgroundColor: 'white',
                  width: '60vw',
                  height: '90px',
                  textAlign: 'center',
                  display: 'block',
                  justifyContent: 'center',
                  fontSize: '20px',
                  alignItems: 'center',
                  float: 'left',
                  marginTop: '1vh',
                  marginLeft: '2vw'
                }}>
                    <div style={{
                      display: 'flex',
                      width: '100%',
                      marginTop: '10vh'
                    }}>
                      <Button style={{
                        width: '78px',
                        height: '50px',
                        backgroundColor: '#c49154',
                        fontFamily: '微软雅黑',
                        fontSize: '20px',
                        color: 'white'
                      }}>{state.dynasty}</Button>
                    </div>
                    <div style={{
                      width: '80%',
                      marginTop: '3vh',
                      textAlign: 'left',
                      color: '#999999',
                      fontSize: '16px'
                    }}>
                      <p>{state.description}</p>
                    </div>
                    <div style={{
                      float: 'left'
                    }}>
                      <Tag color="yellow" style={{
                        fontSize: '20px'
                      }}>{state.three_keys[0]}</Tag>
                      <Tag color="yellow" style={{
                        fontSize: '20px'
                      }}>{state.three_keys[1]}</Tag>
                      <Tag color="yellow" style={{
                        fontSize: '20px'
                      }}>{state.three_keys[2]}</Tag>
                    </div>
                    <div>
                      <Button><NavLink to={"/primary_search/advance"} state={{keywords: state.keywords, checkbox_time: state.checkbox_time, checkbox_museum: state.checkbox_museum}}>返回</NavLink></Button>
                    </div>
                </div>
              </div>
              <div className='foot3'></div>
            </Layout>
        )
}

export default Chartdemo3;